<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>QPic</title>
	<link rel="stylesheet" type="text/css" href="lib/css/bootstrap.css">
</head>
<body>
	<div class="container">
		<h3 style="text-align: center">QPic</h3>
		<div class="form-group">
            <label class="col-md-2 control-label" for="token">Token:</label>
            <div class="col-md-8">
            	<input class="form-control" id="token" name="token" class="ipt" value="">
            	<a target="blank" href="http://jsfiddle.net/gh/get/extjs/4.2/icattlecoder/jsfiddle/tree/master/uptoken">Generate token online</a>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label" for="key">Key:</label>
            <div class="col-md-7">
                <input id="key" class="form-control" name="key" class="ipt" value="">
            </div>
            <div class="col-md-1">
                <button id="key-btn" class="btn btn-success" style="margin-top: 5px" name="key-btn" class="ipt" value="Generate">Generate</button>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label" for="bucket">Picture:</label>
            <div class="col-md-8">
            	<input type="file" id="file" class="form-control" name="file" class="ipt" value="">
            </div>
        </div>
        <div class="form-group" id="btn">
            <div class="col-md-offset-1 col-md-1">
            	<input type="button" id="btn_upload" class="btn btn-info" value="Submit">
            </div>
        </div>
        <div class="form-group" id="ret">
            <label class="col-md-2 control-label" for="result">URL:</label>
            <div class="col-md-6">
                <p id="result"></p>
            </div>
            <div class="col-md-2">
                <button id="copy" class="btn btn-warning">Copy to clipboard</button>
                <p id="copy-result"></p>
            </div>
        </div>
        <div class="form-group" id="continue">
	        <div class="col-md-8">
	        	<div class="col-md-offset-1 col-md-1">
	            	<input type="button" id="btn_continue" class="btn btn-info" value="Continue">
	            </div>
	        </div>
	    </div>
	</div>
	<footer class="footer navbar-fixed-bottom" style="margin-left: 50px">
	    <div class="container">
	    	<p style="text-align: center">&copy; Ji Xiang 2016.5</p>
	    </div>
	</footer>
	<script type="text/javascript" src="lib/js/jquery.min.js"></script>
	<script type="text/javascript" src="lib/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="lib/js/crypto-js.js"></script>
	<script type="text/javascript" src="lib/js/enc-base64.js"></script>
	<script type="text/javascript" src="lib/js/hmac-sha1.js"></script>
	<script type="text/javascript" src="js/uptoken.js"></script>
	<script type="text/javascript" src="js/ajax.js"></script>
</body>
</html>